<template>
	<view class="root">
		<!-- 导航栏 -->
		<div class="nav-bar">
			<span :class="{ active: currentTab === 'all' }" @click="currentTab = 'all'">全部</span>
			<span :class="{ active: currentTab === 'pendingPayment' }" @click="currentTab = 'pendingPayment'">待支付</span>
			<span :class="{ active: currentTab === 'pendingUse' }" @click="currentTab = 'pendingUse'">待使用</span>
			<span :class="{ active: currentTab === 'pendingReview' }" @click="currentTab = 'pendingReview'">待评价</span>
		</div>

		<!-- 订单列表 -->
		<view class="box" v-for="order in filteredOrders" :key="order.id">
			<view class="top">
				<view class="one" @click="goToDetail(order)">
					<text class="id">订单编号：{{ order.id }}</text>
					<view class="img">
						<image src="../../../static/images/mine/向右.png" style="width:16px;height:16px" />
					</view>
				</view>
				<view>服务项目：{{ order.service }}</view>
				<view class="two">
					<view class="store">服务门店：{{ order.store }}</view>
					<view class="img">
						<image src="../../../static/images/mine/导航.png" style="width:16px;height:16px" />
					</view>
					<text class="text" :style="{color: statusColor[order.status]}">
						{{ statusText[order.status] }}
					</text>
				</view>
				<view>下单时间：{{ order.time }}</view>
			</view>
			<view class="bottom">
				<view>实付：<text style="color:red">{{ order.amount }}</text>元</view>
				<template v-if="order.status !== 'canceled' && order.status !== 'refunded'">
					<view v-for="(btn, index) in buttonConfig[order.status]" :key="index" :class="['btn', btn.type]"
						@click="handleAction(order, btn.action)">
						{{ btn.text }}
					</view>
				</template>
			</view>
		</view>
	</view>
</template>

<script setup>
	import {
		ref,
		computed
	} from 'vue';

	const currentTab = ref('all');

	// 订单数据示例
	const orders = ref([{
			id: '24255252522',
			service: '车辆保养',
			store: '大宝车辆维修店',
			time: '2022-20-20 12:09',
			amount: 200,
			status: 'pendingPayment' // pendingPayment/pendingUse/completed/canceled/refunded
		},
		{
			id: '24255252523',
			service: '车辆保养',
			store: '大宝车辆维修店',
			time: '2022-20-20 12:09',
			amount: 200,
			status: 'pendingUse' // pendingPayment/pendingUse/completed/canceled/refunded
		},
		{
			id: '24255252524',
			service: '车辆保养',
			store: '大宝车辆维修店',
			time: '2022-20-20 12:09',
			amount: 200,
			status: 'completed' // pendingPayment/pendingUse/completed/canceled/refunded
		},
		{
			id: '24255252525',
			service: '车辆保养',
			store: '大宝车辆维修店',
			time: '2022-20-20 12:09',
			amount: 200,
			status: 'pendingReview' // pendingPayment/pendingUse/completed/canceled/refunded
		},
		{
			id: '24255252526',
			service: '车辆保养',
			store: '大宝车辆维修店',
			time: '2022-20-20 12:09',
			amount: 200,
			status: 'canceled' // pendingPayment/pendingUse/completed/canceled/refunded
		},
		{
			id: '24255252527',
			service: '车辆保养',
			store: '大宝车辆维修店',
			time: '2022-20-20 12:09',
			amount: 200,
			status: 'refunded' // pendingPayment/pendingUse/completed/canceled/refunded
		},
	]);

	// 状态显示配置
	const statusText = {
		pendingPayment: '待支付',
		pendingUse: '待使用',
		pendingReview: '待评价',
		completed: '已完成',
		canceled: '已取消',
		refunded: '已退款'
	};

	const statusColor = {
		pendingPayment: '#EA1703',
		pendingUse: '#0084FF',
		pendingReview: '#FD9518',
		completed: '#67C23A',
		canceled: '#909399',
		refunded: '#909399'
	};

	// 按钮配置
	const buttonConfig = {
		pendingPayment: [{
				text: '取消订单',
				type: 'btn1',
				action: 'cancel'
			},
			{
				text: '立即支付',
				type: 'btn2',
				action: 'pay'
			}
		],
		pendingUse: [{
				text: '申请退款',
				type: 'btn1',
				action: 'refund'
			},
			{
				text: '扫码结算',
				type: 'btn2',
				action: 'scan'
			}
		],
		pendingReview: [{
				text: '立即评价',
				type: 'btn1',
				action: 'review'
			},
			{
				text: '再来一单',
				type: 'btn2',
				action: 'reorder'
			}
		],
		completed: [{
			text: '再来一单',
			type: 'btn2',
			action: 'reorder'
		}]
	};

	// 过滤订单
	const filteredOrders = computed(() => {
		if (currentTab.value === 'all') return orders.value;
		return orders.value.filter(order => order.status === currentTab.value);
	});

	// 操作处理
	const handleAction = (order, action) => {
		console.log('执行操作:', action, '订单ID:', order.id);
		if (action === "review") {
			uni.navigateTo({
				url: `/pages/mine/myOrder/pengdingEvaluationOrder/rateNow/rateNow?id=${order.id}`
			});

		};
	};

	// 订单详情
	const goToDetail = (order) => {
		console.log(order.status)
		if (order.status === "pendingPayment") {
			uni.navigateTo({
				url: `/pages/mine/myOrder/unpaidOrder/unpaidOrder?id=${order.id}`
			});
		} else if (order.status === "pendingUse") {
			uni.navigateTo({
				url: `/pages/mine/myOrder/pendingUseOrder/pendingUseOrder?id=${order.id}`
			});
		} else if (order.status === "pendingReview") {
			uni.navigateTo({
				url: `/pages/mine/myOrder/pengdingEvaluationOrder/pengdingEvaluationOrder?id=${order.id}`
			});
		} else if (order.status === "completed") {
			uni.navigateTo({
				url: `/pages/mine/myOrder/completedOrder/completedOrder?id=${order.id}`
			});
		} else if (order.status === "canceled") {
			uni.navigateTo({
				url: `/pages/mine/myOrder/canceledOrder/canceledOrder?id=${order.id}`
			});
		} else if (order.status === "refunded") {
			uni.navigateTo({
				url: `/pages/mine/myOrder/refundedOrder/refundedOrder?id=${order.id}`
			});
		}
	}
</script>

<style>
	.root {
		background-color: white;
		width: 100vw;
		padding: 10px 15px 0;
	}

	.nav-bar {
		display: flex;
		justify-content: space-around;
		height: 50px;
		align-items: center;
		font-size: 18px;
	}

	.nav-bar>.active {
		color: #1D6FFF;
	}

	.box {
		background: white;
		box-shadow: 0 5px 10px 1px #eee;
		border-radius: 3px;
		padding: 4px;
		margin-bottom: 4px;
	}

	.top>view {
		height: 30px;
		line-height: 30px;
	}

	.one {
		display: flex;
		justify-content: space-between;
		font-weight: bold;
	}

	.two {
		display: flex;
		justify-content: space-between;
		padding-right: 20px;
	}

	.bottom {
		display: flex;
		height: 50px;
		align-items: center;
		justify-content: space-between;
		border-top: 1px solid #eee;
	}

	.btn {
		width: 80px;
		height: 30px;
		text-align: center;
		line-height: 30px;
		border-radius: 3px;
	}

	.btn1 {
		border: 1px solid #0084FF;
		margin-left: 30px;
	}

	.btn2 {
		background: #0084FF;
		color: white;
	}
</style>